<script>
import * as echarts from 'echarts';

export default {
  name: "RightBottom",
  mounted() {
    this.initChart();
  },
  methods: {
    initChart() {
      var chartDom = document.getElementById('main');
      var myChart = echarts.init(chartDom, 'dark');
      
      const option = {
        color: ['#00ffd9', '#FF6B6B', '#4CAF50', '#FFC107'],
        title: {
          text: '农作物指标',
          textStyle: {
            color: '#00ffd9',
            fontSize: 16
          }
        },
        legend: {
          textStyle: {
            color: '#00ffd9'
          }
        },
        radar: [
          {
            indicator: [
              { text: '产量', max: 100 },
              { text: '质量', max: 100 },
              { text: '价格', max: 100 },
              { text: '销量', max: 100 },
              { text: '接受度', max: 100 }
            ],
            center: ['25%', '55%'],
            radius: 65,
            startAngle: 90,
            splitNumber: 4,
            shape: 'circle',
            axisName: {
              formatter: '{value}',
              color: '#00ffd9',
              fontSize: 12,
              padding: [3, 5]
            },
            splitArea: {
              areaStyle: {
                color: [
                  'rgba(0, 255, 217, 0.02)',
                  'rgba(0, 255, 217, 0.05)',
                  'rgba(0, 255, 217, 0.08)',
                  'rgba(0, 255, 217, 0.1)'
                ],
                shadowColor: 'rgba(0, 255, 217, 0.3)',
                shadowBlur: 10
              }
            },
            axisLine: {
              lineStyle: {
                color: 'rgba(0, 255, 217, 0.8)'
              }
            },
            splitLine: {
              lineStyle: {
                color: 'rgba(0, 255, 217, 0.8)'
              }
            }
          },
          {
            indicator: [
              { text: '产量', max: 150 },
              { text: '质量', max: 150 },
              { text: '价格', max: 150 },
              { text: '销量', max: 120 },
              { text: '利润', max: 108 },
              { text: '接受度', max: 72 }
            ],
            center: ['75%', '55%'],
            radius: 65,
            axisName: {
              color: '#00ffd9',
              fontSize: 12,
              backgroundColor: 'rgba(0, 28, 36, 0.8)',
              borderRadius: 3,
              padding: [3, 5]
            },
            splitArea: {
              areaStyle: {
                color: [
                  'rgba(0, 255, 217, 0.02)',
                  'rgba(0, 255, 217, 0.05)',
                  'rgba(0, 255, 217, 0.08)',
                  'rgba(0, 255, 217, 0.1)'
                ]
              }
            },
            axisLine: {
              lineStyle: {
                color: 'rgba(0, 255, 217, 0.8)'
              }
            },
            splitLine: {
              lineStyle: {
                color: 'rgba(0, 255, 217, 0.8)'
              }
            }
          }
        ],
        series: [
          {
            type: 'radar',
            emphasis: {
              lineStyle: {
                width: 4
              }
            },
            data: [
              {
                value: [90, 85, 70, 88, 95],
                name: '白菜',
                itemStyle: {
                  color: '#00ffd9'
                },
                areaStyle: {
                  color: new echarts.graphic.LinearGradient(0.5, 0, 0.5, 1, [
                    {
                      offset: 0,
                      color: 'rgba(0, 255, 217, 0.5)'
                    },
                    {
                      offset: 1,
                      color: 'rgba(0, 255, 217, 0.1)'
                    }
                  ])
                }
              },
              {
                value: [85, 90, 75, 80, 85],
                name: '西红柿',
                itemStyle: {
                  color: '#FF6B6B'
                },
                areaStyle: {
                  color: new echarts.graphic.LinearGradient(0.5, 0, 0.5, 1, [
                    {
                      offset: 0,
                      color: 'rgba(255, 107, 107, 0.5)'
                    },
                    {
                      offset: 1,
                      color: 'rgba(255, 107, 107, 0.1)'
                    }
                  ])
                }
              }
            ],
            label: {
              show: false
            }
          },
          {
            type: 'radar',
            radarIndex: 1,
            data: [
              {
                value: [120, 118, 130, 100, 99, 70],
                name: '土豆',
                symbol: 'rect',
                symbolSize: 8,
                itemStyle: {
                  color: '#4CAF50'
                },
                lineStyle: {
                  type: 'dashed',
                  color: '#4CAF50',
                  width: 2
                },
                areaStyle: {
                  color: new echarts.graphic.LinearGradient(0.5, 0, 0.5, 1, [
                    {
                      offset: 0,
                      color: 'rgba(76, 175, 80, 0.5)'
                    },
                    {
                      offset: 1,
                      color: 'rgba(76, 175, 80, 0.1)'
                    }
                  ])
                }
              },
              {
                value: [100, 93, 50, 90, 70, 60],
                name: '山药',
                itemStyle: {
                  color: '#FFC107'
                },
                areaStyle: {
                  color: new echarts.graphic.RadialGradient(0.1, 0.6, 1, [
                    {
                      color: 'rgba(255, 193, 7, 0.2)',
                      offset: 0
                    },
                    {
                      color: 'rgba(255, 193, 7, 0.8)',
                      offset: 1
                    }
                  ])
                }
              }
            ],
            label: {
              show: false
            }
          }
        ],
        grid: {
          top: '15%',
        }
      };

      option && myChart.setOption(option);
      
      // 监听窗口大小变化
      window.addEventListener('resize', () => {
        myChart.resize();
      });
    }
  }
}
</script>

<template>
  <div class="right-bottom">
    <dv-border-box-9 :color="['#00ffd9', 'rgba(0, 255, 217, 0.3)']" class="box">
      <div class="content-wrapper">
        <div class="header">
          <div class="title-container">
            <dv-decoration3 class="decoration-left" :color="['#00ffd9', 'rgba(0, 255, 217, 0.3)']" />
            <dv-border-box-2 class="title-box" :color="['#00ffd9', 'rgba(0, 255, 217, 0.3)']">
              <div class="title">试验基地种植作物产量</div>
            </dv-border-box-2>
            <dv-decoration3 class="decoration-right" :color="['#00ffd9', 'rgba(0, 255, 217, 0.3)']" />
          </div>
        </div>
        <div id="main" style="width: 100%; height: 240px; margin-top: 5px;"></div>
      </div>
    </dv-border-box-9>
  </div>
</template>

<style scoped>
.box {
  width: 485px;
  height: 310px;
  background: rgba(0, 28, 36, 0.3);
}
.right-bottom {
  width: 100%;
  height: 100%;
}

.content-wrapper {
  width: 100%;
  height: 100%;
  padding: 16px;
  border-radius: 4px;
  background: rgba(0, 28, 36, 0.5);
}

.header {
  width: 100%;
  margin-bottom: 0;
}

.title-container {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.title-box {
  width: fit-content;
  height: 40px;
  padding: 0 30px;
}

.title {
  color: #00ffd9;
  font-size: 16px;
  font-weight: bold;
  white-space: nowrap;
  padding: 0 10px;
  line-height: 40px;
  text-shadow: 0 0 10px rgba(0, 255, 217, 0.3);
}

.decoration-left,
.decoration-right {
  width: 105px;
  height: 20px;
}

#main {
  width: 100%;
  height: 240px;
  margin-top: 5px;
  background: rgba(0, 28, 36, 0.3);
  border-radius: 4px;
}
</style>